$filter-tree-line-color: $gray-5;

.filter-tree {
  height: 100%;
  color: $white-1;
  margin-top: 10px;
  user-select: none;

  .warning-body {
    display: flex;
    align-items: center;
    svg {
      fill: $yellow;
      height: 11px;
      width: 11px;
      margin-right: 12px;
      margin-bottom: 3px;
    }
  }
  .filter-tree-parent {
    display: flex;
    align-items: center;
    margin: 0;
    height: 24px;
  }
}

.filter-tree-parent:hover {
  background: $white-3;
}

.filter-tree-node {
  position: relative;
  margin-left: $space-m;
  padding: 2px 0;

  .filter-tree-parent::before {
    content: "";
    width: 1px;
    height: 27px;
    position: absolute;
    background: $filter-tree-line-color;
    top: -3px;
    left: 0;
  }

  &:last-of-type > .filter-tree-parent::before {
    height: 17px;
  }

  .filter-tree-children::before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    background: $filter-tree-line-color;
    top: 0;
    left: 0;
  }

  &:last-of-type > .filter-tree-children::before {
    display: none;
  }

  .filter-node {
    background: transparent;
    position: relative;
    margin: 0 0 0 6px;
    box-shadow: none;
    height: 16px;

    p {
      @include label-small;
      line-height: 16px;
      color: $aqua;
      padding: 2px;
      margin: 0 2px;
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &:before {
      content: "";
      position: absolute;
      background: $filter-tree-line-color;
      width: 6px;
      height: 1px;
      right: calc(100% + 1px);
    }
  }

  &.pinned > .filter-tree-parent > .filter-node {
    background: $filter-node-background;
    p {
      color: $filter-node-foreground;
    }
  }

  &.active > .filter-tree-parent > .filter-node {
    background: $gray-4;
    p {
      color: $filter-node-foreground;
    }
  }
}
